<template>
  <view class="box" v-show="modelValue" :style="{ height: '100%' }">
    <view class="whole canvas-autograph flexc">
      <canvas class="scroll-view" canvas-id="mycanvas" @touchstart="touchstart" @touchmove="touchmove"
        disable-scroll="true" @touchend="touchend" />
      <view class="fun-box ">
        <van-button round block type="warning" size="small" @click="clear">
          清空
        </van-button>
        <van-button round block type="primary" size="small" @click="confirm">
          确认
        </van-button>
        <van-button round block type="danger" size="small" @click="cancel">
          取消
        </van-button>
      </view>

    </view>
    <image v-if="showSignature" :src="signatureImage" class="signature-image" />
  </view>

  <!-- 添加用于展示签名的区域 -->
  <view class="signature-container" v-if="showSignature">
    <image :src="signatureImage" class="signature-preview" />
    <span>签名预览</span>
  </view>
</template>

<script setup>
  import {
    ref,
    reactive
  } from 'vue'

  let points = reactive([])
  let canvaCtx = reactive(uni.createCanvasContext('mycanvas'))
  let modelValue = ref(true)
  let showSignature = ref(false) // 控制签名图片的显示状态
  let signatureImage = ref('') // 保存签名图片的临时文件路径

  canvaCtx.lineWidth = 4;
  canvaCtx.lineCap = 'round'
  canvaCtx.lineJoin = 'round'

  const touchstart = e => {
    let startX = e.changedTouches[0].x
    let startY = e.changedTouches[0].y
    let startPoint = {
      X: startX,
      Y: startY
    }
    points.push(startPoint);
    canvaCtx.beginPath();
  }

  const touchmove = e => {
    let moveX = e.changedTouches[0].x
    let moveY = e.changedTouches[0].y
    let movePoint = {
      X: moveX,
      Y: moveY
    }
    points.push(movePoint)
    draw()
  }

  const draw = () => {
    let len = points.length
    if (len >= 2) {
      let point1 = points[len - 2]
      let point2 = points[len - 1]
      canvaCtx.moveTo(point1.X, point1.Y)
      canvaCtx.lineTo(point2.X, point2.Y)
      canvaCtx.stroke()
      canvaCtx.draw(true)
    }
  }

  const touchend = e => {
    // points = [];
  }

  const clear = (callback) => {
    points = [];
    uni.getSystemInfo()
      .then(res => {
        canvaCtx.clearRect(0, 0, res.windowWidth, res.windowHeight);
        canvaCtx.draw(true);
        if (callback && typeof callback === 'function') {
          callback(); // 执行回调函数，可以是取消逻辑
        }
      })
      .catch(err => {
        console.log(err);
      });
  }

  const cancel = () => {
    clear(() => {
      // 清空操作完成后执行取消逻辑
      showSignature.value = false; // 隐藏签名图片
      signatureImage.value = ''; // 清空签名图片路径
      console.log('取消签名');
    });
  }
  // const clear = () => {
  //   points = []
  //   return uni.getSystemInfo()
  //     .then(res => {
  //       canvaCtx.clearRect(0, 0, res.windowWidth, res.windowHeight);
  //       canvaCtx.draw(true);
  //       return res
  //     })
  //     .catch(err => {
  //       console.log(err);
  //     })
  // }

  const confirm = () => {
    console.log(11111)
    if (points.length < 1) {
      uni.showToast({
        icon: 'none',
        title: '请签字'
      })
    } else {
      uni.canvasToTempFilePath({
        canvasId: 'mycanvas',
      }).then(res => {
        const {
          tempFilePath
        } = res
        signatureImage.value = tempFilePath // 将临时文件路径保存到数据属性中
        showSignature.value = true // 显示签名图片
        console.log('签字图片信息:', tempFilePath) // 打印签字图片信息
        // 将签字图片信息存储到本地缓存
        uni.setStorage({
          key: 'signatureImage',
          data: tempFilePath,
          success: function() {
            console.log('签字图片已存储到本地')
          }
        })
      })

    }
  }

  // const cancel = () => {
  //   clear().then((res) => {
  //     console.log('取消签名')
  //   })
  // }
</script>

<style scoped lang="scss">
  .box {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #ffffff;
  }

  .whole {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .scroll-view {
    width: 100%;
    height: 400px;
    background-color: #ffffff;
    border: 1px solid #000000;
  }

  .fun-box {
    width: 100%;
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
  }

  /* 添加用于展示签名的区域样式 */
  .signature-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
  }

  .signature-preview {
    width: 200px;
    height: auto;
  }

  .signature-container span {
    margin-top: 10px;
    font-size: 14px;
  }
</style>